<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">{{operation | translate}}(ID:{{energystoragepowerstation.id}})</h4>
    </div>
    <div class="modal-body">
        <form role="form" name="form_energystoragepowerstation" novalidate class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'SETTING.NAME' | translate}}</label>
                <div class="col-sm-9">
                    <input ng-model="energystoragepowerstation.name" type="text" name="energystoragepowerstationname"
                        class="form-control" required>
                    <div class="m-t-xs"
                        ng-show="form_energystoragepowerstation.energystoragepowerstationname.$invalid && form_energystoragepowerstation.energystoragepowerstationname.$dirty">
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationname.$error.required">{{'SETTING.INPUT_NAME'
                            | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.ADDRESS' | translate}}</label>
                <div class="col-sm-9">
                    <input ng-model="energystoragepowerstation.address" type="text"
                        name="energystoragepowerstationaddress" class="form-control" required>
                    <div class="m-t-xs"
                        ng-show="form_energystoragepowerstation.energystoragepowerstationaddress.$invalid && form_energystoragepowerstation.energystoragepowerstationaddress.$dirty">
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationaddress.$error.required">{{'ENERGY_STORAGE_POWER_STATION.INPUT_ADDRESS'
                            | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.GET_COORDINATE' |
                    translate}}</label>
                <div class="col-sm-9">
                    <a class="btn btn-primary btn-rounded btn-outline"
                        href="https://docs.mapbox.com/playground/geocoding-v6/" target="_blank">Mapbox</a>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.LONGITUDE' | translate}}</label>
                <div class="col-sm-9">
                    <input ng-model="energystoragepowerstation.longitude" type="number"
                        name="energystoragepowerstationlatitude" class="form-control" required>
                    <div class="m-t-xs"
                        ng-show="form_energystoragepowerstation.energystoragepowerstationlongitude.$invalid && form_energystoragepowerstation.energystoragepowerstationlongitude.$dirty">
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationlongitude.$error.required">{{'ENERGY_STORAGE_POWER_STATION.INPUT_LONGITUDE'
                            | translate}}</small>
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationlongitude.$error">{{'SETTING.INVALID_FORMAT'
                            | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.LATITUDE' | translate}}</label>
                <div class="col-sm-9">
                    <input ng-model="energystoragepowerstation.latitude" type="number"
                        name="energystoragepowerstationlatitude" class="form-control" required>
                    <div class="m-t-xs"
                        ng-show="form_energystoragepowerstation.energystoragepowerstationlatitude.$invalid && form_energystoragepowerstation.energystoragepowerstationlatitude.$dirty">
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationlatitude.$error.required">{{'ENERGY_STORAGE_POWER_STATION.INPUT_LATITUDE'
                            | translate}}</small>
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationlatitude.$error">{{'SETTING.INVALID_FORMAT'
                            | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.LONGITUDE_POINT' | translate}}
                    ({{'SETTING.OPTIONAL' | translate}})</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.longitude_point.id" theme="bootstrap">
                        <ui-select-match allow-clear="true"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="point.id as point in points | filter: $select.search">
                            <div ng-bind-html="point.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.LATITUDE_POINT' | translate}}
                    ({{'SETTING.OPTIONAL' | translate}})</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.latitude_point.id" theme="bootstrap">
                        <ui-select-match allow-clear="true"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="point.id as point in points | filter: $select.search">
                            <div ng-bind-html="point.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.RATED_CAPACITY' |
                    translate}}(kWh)</label>
                <div class="col-sm-9">
                    <input ng-model="energystoragepowerstation.rated_capacity" type="number"
                        name="energystoragepowerstationrated_capacity" class="form-control" required>
                    <div class="m-t-xs"
                        ng-show="form_energystoragepowerstation.energystoragepowerstationrated_capacity.$invalid && form_energystoragepowerstation.energystoragepowerstationrated_capacity.$dirty">
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationrated_capacity.$error.required">{{'ENERGY_STORAGE_POWER_STATION.INPUT_CAPACITY'
                            | translate}}</small>
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationrated_capacity.$error">{{'SETTING.INVALID_FORMAT'
                            | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.RATED_POWER' |
                    translate}}(kW)</label>
                <div class="col-sm-9">
                    <input ng-model="energystoragepowerstation.rated_power" type="number"
                        name="energystoragepowerstationrated_power" class="form-control" required>
                    <div class="m-t-xs"
                        ng-show="form_energystoragepowerstation.energystoragepowerstationrated_power.$invalid && form_energystoragepowerstation.energystoragepowerstationrated_power.$dirty">
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationrated_power.$error.required">{{'ENERGY_STORAGE_POWER_STATION.INPUT_CAPACITY'
                            | translate}}</small>
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationrated_power.$error">{{'SETTING.INVALID_FORMAT'
                            | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'SETTING.CONTACT' | translate}}</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.contact.id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="contact.id as contact in contacts | filter: $select.search">
                            <div ng-bind-html="contact.name | highlight: $select.search"></div>
                            <small>{{contact.email}},{{contact.phone}}</small>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs"
                        ng-show="form_energystoragepowerstation.energystoragepowerstationcontact.$invalid && form_energystoragepowerstation.energystoragepowerstationcontact.$dirty">
                        <small class="text-danger"
                            ng-show="form_energystoragepowerstation.energystoragepowerstationcontact.$error.required">{{'SETTING.SELECT_CONTACT'
                            | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'SETTING.COSTCENTER' | translate}}</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.cost_center.id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="costcenter.id as costcenter in costcenters | filter: $select.search">
                            <div ng-bind-html="costcenter.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'COMMON.SVG' | translate}}</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.svg.id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="svg.id as svg in svgs | filter: $select.search">
                            <div ng-bind-html="svg.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'COMMON.SVG' | translate}}2 ({{'SETTING.OPTIONAL' |
                    translate}})</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.svg2.id" theme="bootstrap">
                        <ui-select-match allow-clear="true"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="svg.id as svg in svgs | filter: $select.search">
                            <div ng-bind-html="svg.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'COMMON.SVG' | translate}}3 ({{'SETTING.OPTIONAL' |
                    translate}})</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.svg3.id" theme="bootstrap">
                        <ui-select-match allow-clear="true"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="svg.id as svg in svgs | filter: $select.search">
                            <div ng-bind-html="svg.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'COMMON.SVG' | translate}}4 ({{'SETTING.OPTIONAL' |
                    translate}})</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.svg4.id" theme="bootstrap">
                        <ui-select-match allow-clear="true"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="svg.id as svg in svgs | filter: $select.search">
                            <div ng-bind-html="svg.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'COMMON.SVG' | translate}}5 ({{'SETTING.OPTIONAL' |
                    translate}})</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.svg5.id" theme="bootstrap">
                        <ui-select-match allow-clear="true"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="svg.id as svg in svgs | filter: $select.search">
                            <div ng-bind-html="svg.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.IS_COST_DATA_DISPLAYED' |
                    translate}}</label>
                <div class="col-sm-9">
                    <div class="checkbox checkbox-success">
                        <input id="chk_energystoragepowerstation_iscostdatadisplayed" type="checkbox"
                            ng-model="energystoragepowerstation.is_cost_data_displayed"
                            ng-checked="energystoragepowerstation.is_cost_data_displayed">
                        <label
                            for="chk_energystoragepowerstation_iscostdatadisplayed">{{'ENERGY_STORAGE_POWER_STATION.IS_COST_DATA_DISPLAYED'
                            | translate}}</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.PHASE_OF_LIFECYCLE' |
                    translate}}</label>
                <div class="col-sm-9">
                    <ui-select ng-model="energystoragepowerstation.phase_of_lifecycle" theme="bootstrap" required>
                        <ui-select-match allow-clear="false"
                            placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices
                            repeat="phaseoflifecycle.code as phaseoflifecycle in phaseoflifecycles | filter: $select.search">
                            <div ng-bind-html="phaseoflifecycle.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'ENERGY_STORAGE_POWER_STATION.COMMISSIONING_DATE' |
                    translate}}</label>
                <div class="col-sm-5">
                    <input date-range-picker class="form-control date-picker" type="text"
                        ng-model="energystoragepowerstation.commissioning_date" options="dtOptions"
                        placeholder="{{'SETTING.SELECT_DATE' | translate}}" name="datelocal" readonly="" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">{{'SETTING.DESCRIPTION' | translate}} ({{'SETTING.OPTIONAL' |
                    translate}})</label>
                <div class="col-sm-9">
                    <input ng-model="energystoragepowerstation.description" type="text"
                        name="energystoragepowerstationdescription" class="form-control">
                </div>
            </div>
            <div class="form-group" ng-show="energystoragepowerstation.qrcode">
                <label class="col-sm-3 control-label">{{'COMMON.QR_CODE' | translate}} </label>
                <div class="col-sm-9">
                    <div>
                        <qrcode data="{{energystoragepowerstation.qrcode}}" version="1" error-correction-level="L"
                            size="100" color="#fff" background="#000" download></qrcode>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">{{'SETTING.CANCEL' | translate}}</button>
        <button type="button" ng-disabled="form_energystoragepowerstation.$invalid" class="btn btn-primary"
            ng-click="ok()">{{'SETTING.SAVE' | translate}}</button>
    </div>
</div>